<template>
    <div style="transition: all 2s;">
        <div style="height: 1.3rem">
            <div class="index-serch-bar">
                <div style="height: 1.3rem">
                    <el-row :gutter="20">
                        <el-col :span="18"><div class="grid-content serch">
                            <img src="@/assets/images/搜索.png" alt="" @click="getSearch()">
                            <input type="text" name="" id="serch" v-model="searchValue" @change="getSearch()">
                        </div></el-col>
                        <el-col :span="6"><div class="grid-content location ">
                            <img src="@/assets/images/location.jpg" alt="">
                            <span id="location">上海</span>
                        </div></el-col>
                    </el-row>
                </div>
            </div>
        </div>
        <div class="serchdisplay">
            <ul v-if="!loading">
                <h2 v-if="isEmpty" style="color: #fff; line-height: .6rem; text-align: center;">没有查询结果</h2>
                <li v-for="(o, i) in list" :key="i">
                    <router-link :to="'/workDetails' + o.id" style="color: #fff;">{{ o.name }}</router-link>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>

import { indexSearch } from '@/api/index/Search/indexSearch';

export default {
    name: 'WorkspaceJsonTopSerch',

    data() {
        return {
            isEmpty: false,
            loading: true,
            searchValue: '',
            list: []
        };
    },

    mounted() {
        
    },

    methods: {
        // 搜索
        getSearch(){
            if(this.searchValue){
                this.loading = true
                this.list = []
                // setTimeout(()=>{
                    indexSearch(this.searchValue).then((res)=>{
                        if(res.data.code == 404){
                            this.loading = false
                            this.isEmpty = true
                            console.log('未找到该结果')
                        }else if(res.data.code == 200){
                            this.list = res.data.data
                            this.isEmpty = false
                            this.loading = false
                            // console.log(this.list);
                        }else(
                            console.log('服务器出错')
                        )
                    }).catch(err => console.log("服务器未响应"))
                // },300)
            }else{
                this.list = [{}]
            }
        }
    },
};
</script>

<style scoped>
@import '@/assets/css/index/TopSerch/TopSerch.min.css'
</style>